<template>
  <div class="dialog">
    <el-dialog
      title="绑定教室"
      :visible.sync="isShowBindClassroomDialog"
      width="50%"
      :before-close="handleBindClassroomClose">
      <el-form  v-loading="loading"
                element-loading-text="拼命加载中......"
                element-loading-spinner="el-icon-loading" >
        <div class="dialog-desc">(*此页需要先进行校区的绑定，再进行教室的绑定)</div>
        <div class="box">
          <span class="bind-campus">绑定校区 :</span>
          <el-select v-model="selectedCampus" @change="campusChange" placeholder="请绑定校区">
            <el-option
              v-for="(item,index) in campusInfo"
              :key="index"
              :label="item.Text"
              :value="item.Value">
            </el-option>
          </el-select>
          <span class="bind-classroom">绑定教室 :</span>
          <el-select v-model="selectedClassroom" @change="classroomChange" placeholder="请绑定教室">
            <el-option
              v-for="(item,index) in classroomInfo"
              :key="index"
              :label="item.Text"
              :value="item.Value">
            </el-option>
          </el-select>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="handleBindClassroomClose" :disabled="loading">取 消</el-button>
    <el-button type="primary" @click="submitEvent" :disabled="loading">确 定</el-button>
  </span>

    </el-dialog>

  </div>
</template>

<script>
//导入使用到的接口的类
import Campus from '../../../model/campus'
import ClassroomManage from '../../../model/classroomManage'
import CompanyCurriculumDetails from '../../../model/companyCurriculumDetails'

export default {
  name: 'BindClassroomDialog',
  props: {
    isShowBindClassroomDialog: Boolean,
    bindClassroomId: Number
  },
  data () {
    return {
      loading:false,
      //校区信息
      campusInfo: [],
      //校区id
      campusId: [],
      //校区下拉框中被选中的值
      selectedCampus: '',
      //教室下拉框中被选中的值
      selectedClassroom: '',
      //保存获取到的教室信息
      classroomInfo: [],
      bindClassroomForm: {
        ID: '',
        BindingID: 0
      }
    }
  },
  created () {
    //获取校区集合
    this.getCampusInfo()
    this.showInfo()

  },
  methods: {
    handleBindClassroomClose (payload) {
      console.log(typeof payload)
      this.$emit('handleBindClassroomClose', payload)
    },
    //获取校区的数据集合
    async getCampusInfo () {
      const res = await Campus.PageSearchList()
      this.campusInfo = res
    },
    //校区下拉框中的值改变时候触发
    campusChange (value) {
      this.selectedCampus = value
      this.getClassroomInfo()
    },
    //教室下拉框中的值变化时触发
    classroomChange (value) {
      this.selectedClassroom = value
    },
    //获取教室的数据集合
    async getClassroomInfo () {
      if (this.selectedCampus) {
        this.classroomInfo = await ClassroomManage.PageSearchList({ ID: this.selectedCampus })
      }
    },
    //提交事件
    async submitEvent () {
      if (this.selectedCampus === '') {
        this.$message.error('绑定校区为必选项')
      } else if (this.selectedClassroom === '') {
        this.$message.error('绑定教室为必选项')
      } else {
        this.loading=true
        this.bindClassroomForm.ID = this.bindClassroomId
        this.bindClassroomForm.BindingID = this.selectedClassroom
        await CompanyCurriculumDetails.BingdingClassRoom(this.bindClassroomForm)
        this.loading=false
        this.$message.success('成功绑定教室信息')
        this.handleBindClassroomClose(null)
      }
    },
    //如果已经选择了数据，那么再次点击的时候要展示数据
    async showInfo () {
      const res = await CompanyCurriculumDetails.SearchModelDetails({ ID: this.bindClassroomId })
      this.selectedCampus = res.CampusID
      await this.getClassroomInfo()
      this.selectedClassroom = res.ClassRoomID
    },
  }
}
</script>

<style scoped>
.box {
  display: flex;
  line-height: 40px;
}

.bind-campus {
  width: 80px;
  font-weight: bold;
}

.bind-classroom {
  width: 80px;
  font-weight: bold;
  margin-left: 100px;
}

.dialog {
  position: relative;
}


.dialog-desc {
  position: absolute;
  top: 24px;
  left: 100px;
  color: #DC143C;
  font-weight: bold;
}
</style>
